﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>

	
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
		
		<title>Using DataTable with Editable plugin - Using Table Actions</title>
		<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
			@import "media/css/demo_validation.css";
			@import "media/css/themes/base/jquery-ui.css";
			@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
		</style>

        <script src="media/js/jquery.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
        <script src="media/js/jquery-ui.js" type="text/javascript"></script>
        <script src="media/js/jquery.validate.js" type="text/javascript"></script>
        <script src="media/js/jquery.form.js" type="text/javascript"></script>
        <script src="media/js/jquery.dataTables.editable.js" type="text/javascript"></script>

		<script type="text/javascript" charset="utf-8">
		    $(document).ready(function () {
		        $('#example').dataTable()
                 			.makeEditable({
									aoTableActions: [
										{
										    sAction: "EditBrowser"
										},
										{
										    sAction: "EditPlatforms"
										},
										{
										    sAction: "AddBrowser1",
										    sType: "add"
										}/*,
										{
										    sAction: "AddBrowser2",
										    sType: "add"
										}*/




									],
									sUpdateURL: "UpdateData.php",
                    							sAddURL: "AddData.php",
									sAddHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
                    							sDeleteURL: "DeleteData.php",
									sDeleteHttpMethod: "GET", //Used only on google.code live example because google.code server do not support POST request
aoColumns: [ { } ,  { } , { } , { } , null ]

									
	});
		        
		    });
		</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-17838786-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</head>




<body id="dt_example">
		<div id="container">
			<a href="index.html">Home</a>
			<a href="http://code.google.com/p/jquery-datatables-editable/wiki/Overview">Wiki</a> 
			<h1 class="full_width big">

				Editable DataTable example - Using Table Actions
			</h1>
			
			<h2>Preamble</h2>
			<p>
			You can associate custom actions buttons on the particular table rows. Action buttons can be used to edit entire or partial row elements in the popup edit form.
          </p>


	
		
			
			<h2>Live example</h2>

			<div id="demo">

 <form id="formEditBrowser" action="UpdateBrowser.php" title="Update Browser">
    <input type="hidden" class="DATARECORDID" name="id" />
    <input type="hidden" class="ROWID" name="row_id" />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" class="required" rel="0" />
        <br />
	<button id="formEditBrowserOk" type="submit">Ok</button>
	<button id="formEditBrowserCancel" type="button">Cancel</button>
</form>
 <form id="formEditPlatforms" action="UpdatePlatforms.php" title="Update Platforms">
    <input type="hidden" class="DATARECORDID" name="id" />
    <input type="hidden" class="ROWID" name="row_id" />
                <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
        <br />
        	<button id="formEditPlatformsOk" type="submit">Ok</button>
	<button id="formEditPlatformsCancel" type="button">Cancel</button>
</form>

 <form id="formAddBrowser1" action="UpdatePlatforms.php" title="Add Browser 1">
    <input type="hidden" class="DATARECORDID" name="id" />
    <input type="hidden" class="ROWID" name="row_id" />
                <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
        <br />
        	<button id="formAddBrowser1Ok" type="submit">Ok</button>
	<button id="formAddBrowser1Cancel" type="button">Cancel</button>
</form>

 <form id="formAddBrowser2" action="UpdatePlatforms.php" title="Add Browser 2">
    <input type="hidden" class="DATARECORDID" name="id" />
    <input type="hidden" class="ROWID" name="row_id" />
                <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="Textarea1" class="required" rel="1"></textarea>
        <br />
        	<button id="formAddBrowser2Ok" type="submit">Ok</button>
	<button id="formAddBrowser2Cancel" type="button">Cancel</button>
</form>

 <form id="formAddNewRow" action="#" title="Add new record">
        <input type="hidden" name="id" id="id" value="DATAROWID" />
        <label for="browser">Browser</label><br />
	<input type="text" name="browser" id="browser" rel="0" />
        <br />
        <label for="platforms">Platform(s)</label><br />
	<textarea name="platforms" id="platforms" rel="1"></textarea>
        <br />
        <label for="version">Engine version</label><br />
	<select name="version" id="version" rel="2">
                <option>1.5</option>
                <option>1.7</option>
                <option>1.8</option>
        </select>
        <br />
        <label for="grade">CSS grade</label><br />
		<input type="radio" name="grade" value="A" rel="3"> First<br>
		<input type="radio" name="grade" value="B" rel="3"> Second<br>
		<input type="radio" name="grade" value="C" checked rel="3"> Third
        <br />
<span class="datafield" rel="4" style="display:none">
<a class="table-action-EditBrowser">Edit Browser</a>  <button type="button" class="table-action-EditPlatforms">Edit Platforms</button>          </span>
</form>

<a class="table-action-AddBrowser1">Add 1</a> <button class="table-action-AddBrowser2">Add 2</button>
<div class="add_delete_toolbar" />

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Edit</th>
		</tr>
	</thead>
	<tfoot>
		<tr>


			<th>Browser</th>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
			<th>Edit</th>
		</tr>

	</tfoot>
    <tbody>
        <tr id="1">
            <td>
                Internet Explorer 4.0
            </td>
            <td>
                Win 95+
            </td>
            <td>
                4
            </td>
            <td>
                X
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a> <button type="button" class="table-action-EditPlatforms">Edit Platforms</button>  
            </td>
        </tr>
        <tr id="2">
            <td>
                Internet Explorer 5.0
            </td>
            <td>
                Win 95+
            </td>
            <td>
                5
            </td>
            <td>
                C
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a>  <button type="button" class="table-action-EditPlatforms">Edit Platforms</button>  
            </td>
        </tr>
        <tr id="3">
            <td>
                Internet Explorer 5.5
            </td>
            <td>
                Win 95+
            </td>
            <td>
                5.5
            </td>
            <td>
                A
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a>  <button type="button" class="table-action-EditPlatforms">Edit Platforms</button>  
            </td>
        </tr>
        <tr id="4">
            <td>
                Internet Explorer 6
            </td>
            <td>
                Win 98+
            </td>
            <td>
                6
            </td>
            <td>
                A
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a> <button type="button" class="table-action-EditPlatforms">Edit Platforms</button> 
            </td>
        </tr>
        <tr id="5">
            <td>
                Internet Explorer 7
            </td>
            <td>
                Win XP SP2+
            </td>
            <td>
                7
            </td>
            <td>
                A
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a> <button type="button" class="table-action-EditPlatforms">Edit Platforms</button> 
            </td>
        </tr>
        <tr id="6">
            <td>
                AOL browser (AOL desktop)
            </td>
            <td>
                Win XP
            </td>
            <td>
                6
            </td>
            <td>
                A
            </td>
            <td>
                <a class="table-action-EditBrowser">Edit Browser</a> <button type="button" class="table-action-EditPlatforms">Edit Platforms</button> 
            </td>
        </tr>
    </tbody>
</table>

			</div>
			<div class="spacer"></div>

	

			<h1>Additional HTML code</h1>
	<p>In the table should be placed links or butons with class names in the format table-action-<ACTON_+-NAME>. Plugin will attach event handlers to these elements. Example is shown below:</p>
	<pre>
        &lt;tr id=&quot;6&quot;&gt;
            &lt;td&gt;
                AOL browser (AOL desktop)
            &lt;/td&gt;
            &lt;td&gt;
                Win XP
            &lt;/td&gt;
            &lt;td&gt;
                6
            &lt;/td&gt;
            &lt;td&gt;
                A
            &lt;/td&gt;
            &lt;td&gt;
                &lt;a class=&quot;table-action-EditBrowser&quot;&gt;Edit Browser&lt;/a&gt;
		&lt;button type=&quot;button&quot; class=&quot;table-action-EditPlatforms&quot;&gt;Edit Platforms&lt;/button&gt; 
            &lt;/td&gt;
        &lt;/tr&gt;


	</pre>	
	<p>In the page should be added forms that will be used for editing records. Elements in the form should have rel attributes that matches table columns. Olso id elements with classes DATARECORDID and ROWID are placed in the form their values will be populated with id of the record and id of the row that will be edited.   </p>
	<pre>
 &lt;form id=&quot;formEditPlatforms&quot; action=&quot;UpdatePlatforms.php&quot; title=&quot;Update Platforms&quot;&gt;
    &lt;input type=&quot;hidden&quot; class=&quot;DATARECORDID&quot; name=&quot;id&quot; /&gt;
    &lt;input type=&quot;hidden&quot; class=&quot;ROWID&quot; name=&quot;row_id&quot; /&gt;
                &lt;label for=&quot;platforms&quot;&gt;Platform(s)&lt;/label&gt;&lt;br /&gt;
	&lt;textarea name=&quot;platforms&quot; id=&quot;Textarea1&quot; class=&quot;required&quot; rel=&quot;1&quot;&gt;&lt;/textarea&gt;
        &lt;br /&gt;
        	&lt;button id=&quot;formEditPlatformsOk&quot; type=&quot;submit&quot;&gt;Ok&lt;/button&gt;
	&lt;button id=&quot;formEditPlatformsCancel&quot; type=&quot;button&quot;&gt;Cancel&lt;/button&gt;
&lt;/form&gt;
	</pre>
			

	<h2>Initialization code</h2>
			<p>In the plugin initialization code should be placed definitions of the action. </p>
			<pre>
		        $('#example').dataTable()
                 			.makeEditable({
							aoTableActions: [
										{
										    sAction: "EditBrowser"
										},
										{
										    sAction: "EditPlatforms"
										}
									]		
							});
</pre>

			<h2>Other examples</h2>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="inline-edit.html">Editing cells</a></li>
				<li><a href="addingrecords.html">Adding a new record</a></li>
				<li><a href="delete-record.html">Delete records</a></li>
				<li><a href="custom-editors.html">Custom editors</a></li>
				<li><a href="inline-validation.html">Validation of inline cells</a></li>
				<li><a href="events.html">Pre-processing and post-processing events</a></li>
				<li><a href="customization.html">User interface customizations</a></li>
				<li><a href="custom-messages.html">Customization of message dialogs</a></li>
				<li><a href="customize-buttons.html">Customization of buttons and form</a></li>
				<li><a href="configure-dom.html">Two different tables on the same page</a></li>
				<li><a href="ajax.html">Using Ajax source</a></li>
			</ul>
			
			<div id="footer" style="text-align:center;">
				<span style="font-size:10px;">
					DataTables Editable &copy; Jovan Popovic 2010-2011.<br>
				</span>
			</div>
		</div>
 </body>


</html>
